<template>
  <div>
    <h2 @click="testClick" ref="tar">{{ message }}</h2>
    <h2>{{ $store.state.test.counter }}</h2>
    <h2>{{ $store.getters.powerCounter }}</h2>
    <h2>{{ $store.getters.more20stu }}</h2>
    <h2>{{ $store.getters.more20stuLength }}</h2>
    <h2>{{ $store.getters.moreAgeStu(8) }}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <h2>{{ $store.state.test.info }}</h2>
    <button @click="updateInfo" class="set">响应式修改信息</button>
    <button @click="actionsUpdateInfo" class="set">异步修改信息</button>
    <VuexSon/>
    <hr>
    <h3>一些状态（变量）多个界面共享。比如登陆状态token(令牌)，用户头像，地理位置信息等（userInfo）。</h3>
    <h3>1.提取出一个公共的store对象，用于保存在多个组件中共享的状态</h3>
    <h3>2将store对象放置在 new Vue对象中，这样可以保证在所有的组件中都可以使用到</h3>
    <h3>3.通过this.$store.state.属性的方式来访问状态</h3>
    <h3>4.通过this.$store.commit('mutation中的方法')来修改状态</h3>
    <h3>5.官方提倡使用 mutations 来改变状态，这样是具体那个组件改的state中的值 devtools插件可以追踪到</h3>
    <h3>state 类似于data</h3>
    <h3>mutations 写方法,相当于methods</h3>
    <h3>getters 类似于计算属性</h3>
    <h3>actions 做一些异步操作</h3>
    <h3>modules 划分模块</h3>
    <hr>
    <h3>通常情况下，Vuex要求我们mutation中的方法必须是同步方法</h3>
    <h3>1.主要原因是这样devtools可以帮助我们捕获mutation的快照，如果是异步将不能很好的追踪这个操作什么时候被完成</h3>
    <h3>2.如果是异步可能出视图更新了，devtools的值没更新的奇葩问题</h3>
  </div>
</template>
<script>
import VuexSon from './components/son.vue'
import { UPADTE_INFO,ACTIONS_UPADTE_INFO } from '../../store/mutation-types'
export default {
  components:{
    VuexSon
  },
  data() {
    return {
      message:'我是 Vuex index组件(初始值)',
    }
  },
  created() {
    console.log(this.$store.getters,'---------');
  },
  mounted() {
  },
  methods: {
    addition(){
      this.$store.commit('increment');
    },
    subtraction(){
      this.$store.commit('decrement');
    },
    addCount(count){
      // 普通的提交方式
      // count是一个变量也可以是个对象
      // this.$store.commit('incrementCount',count);
      // 特殊的提交方式
      this.$store.commit({
        type:'incrementCount',
        count,
        age:18
      })
    },
    // mutations同步 mutations
    updateInfo(){
      this.$store.commit(UPADTE_INFO);
    },
    // actions异步用 dispatch
    // actionsUpdateInfo(){
    //   this.$store.dispatch(ACTIONS_UPADTE_INFO,{
    //     message:'我是携带的参数',
    //     success:() => {
    //       console.log('里面已经完成');
    //     }
    //   });
    // }

    actionsUpdateInfo(){
      this.$store.dispatch(ACTIONS_UPADTE_INFO,'我是携带的参数')
        .then(res => {
          console.log('里边已经完成',res);
        });
    },




    testClick(){
      this.message = '改变了的值'
      // 这时候直接打印的话，由于dom元素还没更新
      // 因此打印出来的还是未改变之前的值
      console.log(this.$refs.tar.innerText) // 初始值
    }

    // testClick() {
    //   this.message = '改变了的值'
    //   let that = this
    //   this.$nextTick(() => {
    //     // dom元素更新后执行，因此这里能正确打印更改之后的值
    //     console.log(that.$refs.tar.innerText) // 改变了的值
    //   })
    // }

  }
}
</script>
<style lang="scss" scoped>
h2,h3{
  margin: 15px 0 15px 0;
}
button{
  width: 36px;
  height: 36px;
  margin-right: 5px;
}
.set{
  width: 110px;
}
</style>
